<template>
    <view>
        <view class="integral-details">
            <view class="header">
                <view class="currentScore">当前积分</view>
                <view class="scoreNum">{{ userInfo.point || 0 }}</view>
                <view class="line"></view>
                <view class="nav acea-row">
                    <view class="item">
                        <view class="num">{{ userInfo.totalPoint || 0 }}</view>
                        <view>累计积分</view>
                    </view>
                    <!-- TODO 芋艿：后续接入消费统计 -->
                    <view class="item">
                        <view class="num">{{ integral.deductionIntegral || 0 }}</view>
                        <view>累计消费</view>
                    </view>
                    <view class="item">
                        <view class="num">0</view>
                        <view>冻结积分</view>
                    </view>
                </view>
            </view>
            <view class="wrapper">
                <view class="nav acea-row">
                    <view class="item acea-row row-center-wrapper" :class="current == index ? 'on' : ''" v-for="(item, index) in navList" :key="index" @click="nav(index)">
                        <text class="iconfont" :class="item.icon" />
                        {{ item.name }}
                    </view>
                </view>
                <view class="list" :hidden="current != 0">
                    <view class="tip acea-row row-middle">
                        <text class="iconfont icon-shuoming" />
                        提示：积分数值的高低会直接影响您的会员等级
                    </view>
                    <view class="item acea-row row-between-wrapper" v-for="(item, index) in integralList" :key="index">
                        <view>
                            <view class="state">{{ item.title }}</view>
                            <view>{{ formatDate(item.createTime) }}</view>
                        </view>
                        <view class="num font-color" v-if="item.point > 0">+{{ item.point }}</view>
                        <view class="num" v-else>{{ item.point }}</view>
                    </view>
                    <view class="loadingicon acea-row row-center-wrapper" v-if="integralList.length > 0">
                        <text class="loading iconfont icon-jiazai" :hidden="loading === false" />
                        {{ loadTitle }}
                    </view>
                    <view v-if="integralList.length === 0">
                        <emptyPage title="暂无积分记录哦～" />
                    </view>
                </view>
                <view class="list2" :hidden="current !== 1">
                    <navigator class="item acea-row row-between-wrapper" open-type="switchTab" hover-class="none" url="/pages/index/index">
                        <view class="pictrue">
                            <image src="../../../static/images/score.png"></image>
                        </view>
                        <view class="name">购买商品可获得积分奖励</view>
                        <view class="earn">赚积分</view>
                    </navigator>
                    <navigator class="item acea-row row-between-wrapper" hover-class="none" url="/pages/users/user_sgin/index">
                        <view class="pictrue">
                            <image src="../../../static/images/score.png"></image>
                        </view>
                        <view class="name">每日签到可获得积分奖励</view>
                        <view class="earn">赚积分</view>
                    </navigator>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { toLogin } from '@/libs/login.js'
import { mapGetters } from 'vuex'
import * as PointApi from '@/api/member/point'
import dayjs from '@/plugin/dayjs/dayjs.min.js'
export default {
    data() {
        return {
            navList: [
                {
                    name: '分值明细',
                    icon: 'icon-mingxi'
                },
                {
                    name: '分值提升',
                    icon: 'icon-tishengfenzhi'
                }
            ],
            current: 0,
            page: 1,
            limit: 10,
            integralList: [],
            integral: {},
            loadend: false,
            loading: false,
            loadTitle: '加载更多'
        }
    },
    // computed: mapGetters(['userInfo']),
    // watch: {
    // 	isLogin: {
    // 		handler: function(newV, oldV) {
    // 			if (newV) {
    // 				this.getIntegralList();
    // 			}
    // 		},
    // 		deep: true
    // 	}
    // },
    onShow() {
        this.userInfo = uni.getStorageSync('USER_INFO')
        // if (!this.isLogin) {
        // 	toLogin();
        // 	return;
        // }
        this.getIntegralList()
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        this.getIntegralList()
    },
    methods: {
        /**
         * 获取积分明细
         */
        getIntegralList: function () {
            if (this.loading || this.loadend) {
                return
            }
            this.loading = true
            this.loadTitle = ''
            PointApi.getPointRecordPage({
                pageNo: this.page,
                pageSize: this.limit
            })
                .then((res) => {
                    const list = res.data.list
                    const loadend = list.length < this.limit
                    this.signList = this.$util.SplitArray(list, this.signList)
                    this.$set(this, 'integralList', this.signList)
                    this.loadend = loadend
                    this.loading = false
                    this.loadtitle = loadend ? '哼😕~我也是有底线的~' : '加载更多'
                })
                .catch((err) => {
                    this.loading = false
                    this.loadtitle = '加载更多'
                })
        },
        nav: function (current) {
            this.current = current
        },
        formatDate: function (date) {
            return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
        }
    }
}
</script>
<style scoped lang="scss">
.integral-details .header {
    background-image: url('');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 460rpx;
    font-size: 72rpx;
    color: #fff;
    padding: 31rpx 0 45rpx 0;
    box-sizing: border-box;
    text-align: center;
    font-family: 'Guildford Pro';
}

.integral-details .header .currentScore {
    font-size: 26rpx;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    margin-bottom: 11rpx;
}

.integral-details .header .scoreNum {
    font-family: 'Guildford Pro';
}

.integral-details .header .line {
    width: 60rpx;
    height: 3rpx;
    background-color: #fff;
    margin: 20rpx auto 0 auto;
}

.integral-details .header .nav {
    font-size: 22rpx;
    color: rgba(255, 255, 255, 0.8);
    flex: 1;
    margin-top: 35rpx;
}

.integral-details .header .nav .item {
    width: 33.33%;
    text-align: center;
}

.integral-details .header .nav .item .num {
    color: #fff;
    font-size: 40rpx;
    margin-bottom: 5rpx;
    font-family: 'Guildford Pro';
}

.integral-details .wrapper .nav {
    flex: 1;
    width: 690rpx;
    border-radius: 20rpx 20rpx 0 0;
    margin: -96rpx auto 0 auto;
    background-color: #f7f7f7;
    height: 96rpx;
    font-size: 30rpx;
    color: #bbb;
}

.integral-details .wrapper .nav .item {
    text-align: center;
    width: 50%;
}

.integral-details .wrapper .nav .item.on {
    background-color: #fff;
    color: $theme-color;
    font-weight: bold;
    border-radius: 20rpx 0 0 0;
}

.integral-details .wrapper .nav .item:nth-of-type(2).on {
    border-radius: 0 20rpx 0 0;
}

.integral-details .wrapper .nav .item .iconfont {
    font-size: 38rpx;
    margin-right: 10rpx;
}

.integral-details .wrapper .list {
    background-color: #fff;
    padding: 24rpx 30rpx;
}

.integral-details .wrapper .list .tip {
    font-size: 25rpx;
    width: 690rpx;
    height: 60rpx;
    border-radius: 50rpx;
    background-color: #fff5e2;
    border: 1rpx solid #ffeac1;
    color: #c8a86b;
    padding: 0 20rpx;
    box-sizing: border-box;
    margin-bottom: 24rpx;
}

.integral-details .wrapper .list .tip .iconfont {
    font-size: 35rpx;
    margin-right: 15rpx;
}

.integral-details .wrapper .list .item {
    height: 124rpx;
    border-bottom: 1rpx solid #eee;
    font-size: 24rpx;
    color: #999;
}

.integral-details .wrapper .list .item .state {
    font-size: 28rpx;
    color: #282828;
    margin-bottom: 8rpx;
}

.integral-details .wrapper .list .item .num {
    font-size: 36rpx;
    font-family: 'Guildford Pro';
}

.integral-details .wrapper .list2 {
    background-color: #fff;
    padding: 24rpx 0;
}

.integral-details .wrapper .list2 .item {
    background-image: linear-gradient(to right, #fff7e7 0%, #fffdf9 100%);
    width: 690rpx;
    height: 180rpx;
    position: relative;
    border-radius: 10rpx;
    margin: 0 auto 20rpx auto;
    padding: 0 25rpx 0 180rpx;
    box-sizing: border-box;
}

.integral-details .wrapper .list2 .item .pictrue {
    width: 90rpx;
    height: 150rpx;
    position: absolute;
    bottom: 0;
    left: 45rpx;
}

.integral-details .wrapper .list2 .item .pictrue image {
    width: 100%;
    height: 100%;
}

.integral-details .wrapper .list2 .item .name {
    width: 285rpx;
    font-size: 30rpx;
    font-weight: bold;
    color: #c8a86b;
}

.integral-details .wrapper .list2 .item .earn {
    font-size: 26rpx;
    color: #c8a86b;
    border: 2rpx solid #c8a86b;
    text-align: center;
    line-height: 52rpx;
    height: 52rpx;
    width: 160rpx;
    border-radius: 50rpx;
}
</style>
